<template>
  <div id="tab-box">

    <div
      v-for="(item, index) in tabData"
      :key="index"
      v-if="!item.hidden"
      @click="tabClick(index)"
      class="tab-item"
      :class="tabIndex === index && 'active'"
    >
      {{ item.text }}
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  props: {
    tabData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    // tabNum() {
    //   return this.$store.state.app.tabNum
    // }
  },
  data() {
    return {
      tabIndex: 0,
    };
  },
  created() {
    // if (localStorage.getItem('tabNum')) {
    //   this.tabIndex = Number(localStorage.getItem('tabNum'));
    //
    //   this.$emit('tabEmit', {
    //     tabIndex: this.tabIndex,
    //   })
    // }
  },
  methods: {
    ...mapMutations(["settabNum"]),
    tabClick(type) {
      this.tabIndex = type;
      this.$emit("tabEmit", {
        tabIndex: type,
      });
    },
  },
  watch: {
    tabIndex(val) {},
  },
};
</script>
<style lang="scss" scoped>
$tabPadding: 10px;
$tabFont: 12px;
$tabLH: 1.5;
#tab-box {
  border-bottom: 1px solid #dcdee2;
  margin-bottom: 5px;
  overflow-x: auto;
  white-space: nowrap;
  height: $tabFont * $tabLH + $tabPadding * 2 + 2;
  flex: 0 0 $tabFont * $tabLH + $tabPadding * 2 + 2;
  -webkit-flex: 0 0 $tabFont * $tabLH + $tabPadding * 2 + 2;
  .tab-item.active {
    border-color: #dcdee2;
    border-radius: 5px 5px 0 0;
  }
}

#tab-box .tab-item {
  padding: $tabPadding 20px;
  font-size: $tabFont;
  line-height: $tabLH;
  display: inline-block;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: 0;
}
</style>
